<template>
    <ul class="px-[16px] flex flex-wrap pb-[68px]">
      <li class="relative w-[33%] pt-[30px]" v-for="(item, index) in menuitems" :key="index" >
        <div>{{ item.CH }}</div>
        <img :src="rightPointer.src" alt=""
          class="hover w-[16px] h-[20px] absolute right-[26px] top-[50%]  r-[12px]" />
        <img :src="rightPointerDefault.src" alt=""
          class="default w-[16px] h-[20px] absolute right-[26px] top-[50%] r-[12px]" />
      </li>
    </ul>
  </template>
  <script setup>
  
  import rightPointer from '@assets/right-pointer.png';
  import rightPointerDefault from '@assets/right-pointer-default.png';
  const menuitems = [
    {
      CH: "质量管理",
      EN: 'Point of Load Converter',
      path: "/componentPackagingLibrary",
    },
    {
      CH: "环境管理",
      EN: 'Controller',
      path: "/productEvaluationBoard",
    },
    {
      CH: "可靠性",
      EN: 'Smart Power Stage',
      path: "/encapsulationResources",
    },
  ]
  
  </script>
  <style lang="scss" scoped>
  li {
    font-size: 14px;
    padding-bottom: 4px;
    border-bottom: 1px solid #D8D8D8;
    box-sizing: border-box;
    color: #3D3D3D;
    font-size: 14px;
    width: calc(33% - 20px);
    margin-left: 10px;
    margin-right: 10px;
  
    &:hover {
      color: #712C2F;
      font-weight: 500;
  
      .default {
        display: none;
      }
  
      .hover {
        display: block;
      }
    }
  
    .hover {
      display: none;
    }
  
    .default {
      display: block;
    }
  }
  </style>